<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单测试</title>
</head>

<body>
    <form>
        <label>收货人</label><input type="text"><br>
        <label>手机号码</label><input type="text"><br>
        <label>所在地区</label><input type="text"><br>
        <label>详细地址</label><input type="text" class="input1"><br>
        <label style="font-weight: bold;">标签</label><br>
        <div class="ch">
            <input type="checkbox">
            <label>家</label>
            <input type="checkbox">
            <label>公司</label>
            <input type="checkbox">
            <label>学校</label>
        </div>
        <div class="adress">
            <label>设置为默认地址</label>
            <input type="checkbox"></input>
        </div>
        <input type="submit" value="提交">
    </form>
</body>

<style>
    label {
        display: block;
        margin-bottom: 15px;
        font-weight: bold;
    }

    .input1 {
        width: 365px;
        height: 92px;
    }

    input {
        border: 1px solid rgb(96, 101, 255);
        padding: 5px;
        width: 365px;
        height: 30px;
        border-radius: 5px;
        margin-bottom: 5px;
    }

    input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border: 2px solid rgb(125, 125, 125);
        border-radius: 50%;
        position: relative;
        cursor: pointer;
        margin-right: 5px;
    }

    input[type="checkbox"]:checked {
        background-color: rgb(118, 118, 118);
    }

    input[type="checkbox"]:checked::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: white;
    }

    input[type="submit"] {
        width: 80px;
        height: 50px;
        padding: 10px 20px;
        background-color: rgb(21, 131, 219);
        color: white;
        border: none;
        cursor: pointer;

    }

    .ch {
        display: flex;
        width: 200px;

    }

    .adress {
        display: flex;
    }

    .adress input[type="checkbox"] {
        border-radius: 0;
        width: 14px;
        height: 14px;
    }
</style>

</html>